<template>
  <div class="community-container">
    <div class="community-header">
      <h1 class="community-title">学习社区</h1>
      <div class="community-tabs">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="讨论区" name="discussions"></el-tab-pane>
          <el-tab-pane label="问答区" name="questions"></el-tab-pane>
          <el-tab-pane label="学习笔记" name="notes"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="community-actions">
        <el-button type="primary" @click="createNew">
          {{ getCreateButtonText() }}
        </el-button>
      </div>
    </div>

    <div class="community-content">
      <!-- 讨论区列表 -->
      <div v-if="activeTab === 'discussions'" class="discussions-list">
        <div class="list-header">
          <div class="filter-options">
            <el-radio-group v-model="discussionFilter" size="small">
              <el-radio-button label="latest">最新</el-radio-button>
              <el-radio-button label="hot">热门</el-radio-button>
              <el-radio-button label="favorites">我的收藏</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索讨论"
              prefix-icon="el-icon-search"
              clearable
              @clear="handleSearchClear"
              @keyup.enter="handleSearch"
            ></el-input>
          </div>
        </div>

        <div class="list-content">
          <el-card
            v-for="discussion in filteredDiscussions"
            :key="discussion.id"
            class="discussion-item"
            shadow="hover"
            @click="viewDiscussion(discussion.id)"
          >
            <div class="discussion-header">
              <h3 class="discussion-title">{{ discussion.title }}</h3>
              <div class="discussion-tags">
                <el-tag
                  v-for="tag in discussion.tags"
                  :key="tag"
                  size="small"
                  effect="plain"
                  class="tag"
                >{{ tag }}</el-tag>
              </div>
            </div>
            <div class="discussion-content">{{ discussion.content }}</div>
            <div class="discussion-footer">
              <div class="discussion-author">
                <el-avatar :size="24" :src="discussion.author.avatar"></el-avatar>
                <span>{{ discussion.author.name }}</span>
              </div>
              <div class="discussion-meta">
                <span class="time">{{ discussion.createTime }}</span>
                <span class="views"><el-icon><View /></el-icon> {{ discussion.views }}</span>
                <span class="comments"><el-icon><ChatDotRound /></el-icon> {{ discussion.comments.length }}</span>
                <span class="likes"><el-icon><Star /></el-icon> {{ discussion.likes }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 问答区列表 -->
      <div v-if="activeTab === 'questions'" class="questions-list">
        <div class="list-header">
          <div class="filter-options">
            <el-radio-group v-model="questionFilter" size="small">
              <el-radio-button label="latest">最新</el-radio-button>
              <el-radio-button label="hot">热门</el-radio-button>
              <el-radio-button label="unanswered">未回答</el-radio-button>
              <el-radio-button label="favorites">我的收藏</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索问题"
              prefix-icon="el-icon-search"
              clearable
              @clear="handleSearchClear"
              @keyup.enter="handleSearch"
            ></el-input>
          </div>
        </div>

        <div class="list-content">
          <el-card
            v-for="question in filteredQuestions"
            :key="question.id"
            class="question-item"
            shadow="hover"
            @click="viewQuestion(question.id)"
          >
            <div class="question-header">
              <h3 class="question-title">{{ question.title }}</h3>
              <div class="question-tags">
                <el-tag
                  v-for="tag in question.tags"
                  :key="tag"
                  size="small"
                  effect="plain"
                  class="tag"
                >{{ tag }}</el-tag>
              </div>
            </div>
            <div class="question-content">{{ question.content }}</div>
            <div class="question-footer">
              <div class="question-author">
                <el-avatar :size="24" :src="question.author.avatar"></el-avatar>
                <span>{{ question.author.name }}</span>
              </div>
              <div class="question-meta">
                <span class="time">{{ question.createTime }}</span>
                <span class="views"><el-icon><View /></el-icon> {{ question.views }}</span>
                <span class="answers"><el-icon><ChatDotRound /></el-icon> {{ question.answers.length }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 学习笔记列表 -->
      <div v-if="activeTab === 'notes'" class="notes-list">
        <div class="list-header">
          <div class="filter-options">
            <el-radio-group v-model="noteFilter" size="small">
              <el-radio-button label="latest">最新</el-radio-button>
              <el-radio-button label="hot">热门</el-radio-button>
              <el-radio-button label="favorites">我的收藏</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索笔记"
              prefix-icon="el-icon-search"
              clearable
              @clear="handleSearchClear"
              @keyup.enter="handleSearch"
            ></el-input>
          </div>
        </div>

        <div class="list-content">
          <el-card
            v-for="note in filteredNotes"
            :key="note.id"
            class="note-item"
            shadow="hover"
            @click="viewNote(note.id)"
          >
            <div class="note-header">
              <h3 class="note-title">{{ note.title }}</h3>
              <div class="note-tags">
                <el-tag
                  v-for="tag in note.tags"
                  :key="tag"
                  size="small"
                  effect="plain"
                  class="tag"
                >{{ tag }}</el-tag>
              </div>
            </div>
            <div class="note-content">{{ note.summary }}</div>
            <div class="note-footer">
              <div class="note-author">
                <el-avatar :size="24" :src="note.author.avatar"></el-avatar>
                <span>{{ note.author.name }}</span>
              </div>
              <div class="note-meta">
                <span class="time">{{ note.createTime }}</span>
                <span class="views"><el-icon><View /></el-icon> {{ note.views }}</span>
                <span class="likes"><el-icon><Star /></el-icon> {{ note.likes }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { View, ChatDotRound, Star } from '@element-plus/icons-vue';

const store = useStore();
const router = useRouter();

// 当前激活的标签页
const activeTab = ref('discussions');

// 筛选和搜索
const discussionFilter = ref('latest');
const questionFilter = ref('latest');
const noteFilter = ref('latest');
const searchKeyword = ref('');

// 获取数据
onMounted(() => {
  // 实际项目中这里应该调用API获取数据
  // 这里使用store中的示例数据
});

// 计算属性：根据筛选条件过滤讨论列表
const filteredDiscussions = computed(() => {
  let discussions = store.getters['community/allDiscussions'];
  
  // 根据关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    discussions = discussions.filter(item => 
      item.title.toLowerCase().includes(keyword) || 
      item.content.toLowerCase().includes(keyword) ||
      item.tags.some(tag => tag.toLowerCase().includes(keyword))
    );
  }
  
  // 根据筛选条件排序
  switch (discussionFilter.value) {
    case 'latest':
      return discussions.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
    case 'hot':
      return discussions.sort((a, b) => b.views - a.views);
    case 'favorites':
      return discussions.filter(item => store.getters['community/isDiscussionFavorite'](item.id));
    default:
      return discussions;
  }
});

// 计算属性：根据筛选条件过滤问题列表
const filteredQuestions = computed(() => {
  let questions = store.getters['community/allQuestions'];
  
  // 根据关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    questions = questions.filter(item => 
      item.title.toLowerCase().includes(keyword) || 
      item.content.toLowerCase().includes(keyword) ||
      item.tags.some(tag => tag.toLowerCase().includes(keyword))
    );
  }
  
  // 根据筛选条件排序
  switch (questionFilter.value) {
    case 'latest':
      return questions.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
    case 'hot':
      return questions.sort((a, b) => b.views - a.views);
    case 'unanswered':
      return questions.filter(item => item.answers.length === 0);
    case 'favorites':
      return questions.filter(item => store.getters['community/isQuestionFavorite'](item.id));
    default:
      return questions;
  }
});

// 计算属性：根据筛选条件过滤笔记列表
const filteredNotes = computed(() => {
  let notes = store.getters['community/allNotes'];
  
  // 根据关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    notes = notes.filter(item => 
      item.title.toLowerCase().includes(keyword) || 
      item.summary.toLowerCase().includes(keyword) ||
      item.tags.some(tag => tag.toLowerCase().includes(keyword))
    );
  }
  
  // 根据筛选条件排序
  switch (noteFilter.value) {
    case 'latest':
      return notes.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
    case 'hot':
      return notes.sort((a, b) => b.views - a.views);
    case 'favorites':
      return notes.filter(item => store.getters['community/isNoteFavorite'](item.id));
    default:
      return notes;
  }
});

// 处理标签页切换
const handleTabClick = (tab) => {
  searchKeyword.value = ''; // 切换标签页时清空搜索关键词
};

// 处理搜索
const handleSearch = () => {
  // 实际项目中这里可能需要调用API进行搜索
  // 这里直接使用计算属性过滤本地数据
};

// 处理清空搜索
const handleSearchClear = () => {
  searchKeyword.value = '';
};

// 获取创建按钮文本
const getCreateButtonText = () => {
  switch (activeTab.value) {
    case 'discussions':
      return '发起讨论';
    case 'questions':
      return '提问题';
    case 'notes':
      return '写笔记';
    default:
      return '创建';
  }
};

// 创建新内容
const createNew = () => {
  switch (activeTab.value) {
    case 'discussions':
      router.push('/community/discussion/create');
      break;
    case 'questions':
      router.push('/community/question/create');
      break;
    case 'notes':
      router.push('/community/note/create');
      break;
  }
};

// 查看讨论详情
const viewDiscussion = (id) => {
  router.push(`/community/discussion/${id}`);
};

// 查看问题详情
const viewQuestion = (id) => {
  router.push(`/community/question/${id}`);
};

// 查看笔记详情
const viewNote = (id) => {
  router.push(`/community/note/${id}`);
};
</script>

<style lang="scss" scoped>
.community-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.community-header {
  margin-bottom: 20px;
  
  .community-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .community-tabs {
    margin-bottom: 20px;
  }
  
  .community-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  .filter-options {
    margin-right: 20px;
  }
  
  .search-box {
    width: 300px;
  }
}

.list-content {
  .discussion-item,
  .question-item,
  .note-item {
    margin-bottom: 15px;
    cursor: pointer;
    
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    
    .discussion-header,
    .question-header,
    .note-header {
      margin-bottom: 10px;
      
      .discussion-title,
      .question-title,
      .note-title {
        font-size: 18px;
        margin: 0 0 10px 0;
      }
      
      .discussion-tags,
      .question-tags,
      .note-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        
        .tag {
          margin-right: 5px;
        }
      }
    }
    
    .discussion-content,
    .question-content,
    .note-content {
      color: #606266;
      margin-bottom: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .discussion-footer,
    .question-footer,
    .note-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #909399;
      font-size: 14px;
      
      .discussion-author,
      .question-author,
      .note-author {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      
      .discussion-meta,
      .question-meta,
      .note-meta {
        display: flex;
        gap: 15px;
        
        .time,
        .views,
        .comments,
        .answers,
        .likes {
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .list-header {
    flex-direction: column;
    align-items: flex-start;
    
    .filter-options {
      margin-bottom: 10px;
      margin-right: 0;
    }
    
    .search-box {
      width: 100%;
    }
  }
  
  .discussion-footer,
  .question-footer,
  .note-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style> 